<template>
	<view class="container">
		<view class="background-color" :style="'background:' + mobile_head_color">
			<view class="topbox">
				<view class="name">{{listdata.room_address}}</view>
				<view class="info-box">
					<view class="name">{{listdata.user_name}}</view>
					<view class="tips">业主</view>
				</view>
				<view class="phone">{{listdata.user_phone}}</view>
				<view class="address-box" v-if="listdata.village_address">
					<view class="address-icon">
						<image src="../../../static/images/address.png" class="address-img"></image>
					</view>
					<view class="address-text">{{listdata.village_address}}</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="title">单价： <text style="color: #3c3c3c;">{{dataList.unit_price}}(元/立方米)</text></view>
			<view class="title">倍率：<text style="color: #3c3c3c;">{{dataList.rate}}</text></view>
			<view class="title">公摊：<text style="color: #3c3c3c;">{{dataList.pool}}(元)</text></view>
			<view class="title">起度：</view>
			<input type="text" class="ipt-box" v-model="start_num" value="" placeholder-style="text-align:center;font-size:24rpx" :placeholder="placeholder_text" />
			<view class="title">止度：</view>
			<input type="text" class="ipt-box" v-model="end_num" value="" placeholder-style="text-align:center;font-size:24rpx" placeholder="请输入止度" />
			<button type="primary" :style="btn_style" @tap="gopass" class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getvisitorList = () => {
		common.post('HouseApi&a=room_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			cate_id: _this.cate_id,
		}, data => {
			console.log('++++', data)
			_this.listdata = data.find_info;
			_this.dataList = data.room_project;
			_this.floor_id = data.find_info.vacancy_floor_id;
			_this.room_id = data.find_info.room_id;
			_this.phone = data.find_info.user_phone;
			_this.user_uid = data.find_info.user_uid;
			if(data.start_num == 0){
				_this.placeholder_text = "请输入起度"
			}else{
				_this.placeholder_text = data.start_num + "(该起度为上一次记录表的止度)"
			}
		});
	};
	const getconfirmPass = () => {
		common.post('HouseApi&a=add_meter_read', {
			village_id: _this.village_id,
			cate_id: _this.cate_id,
			floor_id: _this.floor_id,
			room_id: _this.room_id,
			user_bind_id: _this.user_uid,
			user_bind_phone: _this.phone,
			start_num: _this.start_num,
			end_num: _this.end_num,
		}, data => {
			console.log('++++', data)
			_this.start_num = '';
			_this.end_num = '';
			uni.navigateBack()
		});
	};
	
	export default {
		data() {
			return {
				listdata: {},
				dataList: [],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				cate_id: 0,
				placeholder_text: '请输入起度',
				start_num: '',
				end_num: '',
				phone: '',
				floor_id: '',
				room_id: '',
				user_uid: '',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.cate_id = options.id;
			_this.pigcms_id = options.pigcms_id;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.village_name = res.village_name;
				};
				getvisitorList()
			});
		},
		methods: {
			govisitor() {
				uni.navigateTo({
					url: '/pages/village/my/visitorRegistrationlist'
				})
			},
			gopass() {
				if(_this.start_num && _this.end_num){
					getconfirmPass()
				}else{
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('起/止度不能为空'),
						showCancel: false,
						confirmText: common.changeTxt('确定'),
						success: function(res) {
							if (res.confirm) {
								
							}
						}
					});
				}
				
			},
		},
		components: {

		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.topbox {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}

	.phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.address-icon {
		width: 25rpx;
		height: 30rpx;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}

	.box {
		margin: 15rpx 30rpx;
	}

	.title {
		line-height: 60rpx;
	}

	.ipt-box {
		border: 2rpx solid #C1C1C1;
		border-radius: 10rpx;
		padding: 15rpx 0rpx;
		text-align: center;
	}

	.btn {
		color: #FFFFFF;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		
	}
</style>
